<!-- 正式零工规则 -->
<template>
	<view class="officialRule">
		<view class="officialRule-title"> 零工规则 </view>
		<view class="officialRule-text">
			<text class=""> 正式零工说明: </text>
			<text class="">1.正式零工是雇员 1次 晋升身份，可以通过完成成长任务再次升级。 </text>
			<text class=""> 2.正式零工权益 \n <text style='padding-left:20rpx'> ①每日 10次 报名次数</text> \n <text
					style='padding-left:20rpx'> ②只可接取普通任务</text> \n <text style='padding-left:20rpx'> ③可同时接取 2单
					任务</text> \n <text style='padding-left:20rpx'> ④每月 10日,25日 提现免费，正常收取 3% 手续费。</text>
			</text>
			<text class=""> 3.正式零工成长任务分为 2个 \n <text style='padding-left:20rpx'> ①正式培训 </text> \n <text
					style='padding-left:20rpx'> ②购买工装</text> \n <text style='padding-left:20rpx'> ③完成 5单 (无差评订单) </text>
			</text>
			<text class="">4.正式零工完成成长任务后，需要激活金牌零工晋升期。</text>
		</view>
	</view>
</template>
<script>
	export default ({
		name: 'officialRule',
		data() {
			return {}
		},
		methods: {}
	})
</script>
<style lang="scss">
	.officialRule {
		width: 694rpx;
		background: #3A3A3A;
		box-shadow: 0rpx 6rpx 24rpx 2rpx rgba(32, 30, 30, 0.64), inset 1rpx 1rpx 0rpx 2rpx rgba(192, 195, 203, 0.57);
		border-radius: 24rpx;
		margin: 30rpx auto;
		padding: 30rpx 0;

		&-title {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
			color: #E6E6E6;
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;
			margin-top: 30rpx;
		}

		&-title::before {
			content: '';
			width: 40rpx;
			height: 4rpx;
			background: #9699A3;
			border-radius: 30rpx;
			opacity: 1;
			display: block;
			margin-right: 30rpx;
		}

		&-title::after {
			content: '';
			display: block;
			width: 40rpx;
			height: 4rpx;
			background: #9699A3;
			border-radius: 30rpx;
			opacity: 1;
			margin-left: 30rpx;
		}

		&-text {
			font-size: 32rpx;
			font-weight: 400;
			color: #E6E6E6;
			line-height: 50rpx;
			display: flex;
			flex-direction: column;
			margin: 30rpx;
			font-weight: 400;

			&>text {
				margin-bottom: 30rpx;
			}

			text:nth-child(3),
			text:nth-child(4) {
				view {
					display: flex;
					flex-direction: column;
					text-indent: 1em;
				}
			}
		}
	}
</style>